<template>
  <!-- :autoplay="{ delay: 3000 }" -->
  <swiper
    :slides-per-view="1"
    :space-between="0"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
    :modules="modules"
    :navigation="{ prevEl: '.prev', nextEl: '.next' }"
    :pagination="{ type: 'fraction', el: '.pagination' }"
    :class="getClassAndStyle(props.height).class"
    :style="getClassAndStyle(props.height).style"
    v-bind="$attrs"
  >
    <swiper-slide v-for="item in items" :key="item.image">
      <slot :item="item">
        <div class="bg-image" :style="{ backgroundImage: `url(${item.image})` }">
          <Container class="h-full">
            <!-- lt-sm:px-4 当屏幕宽度小于640px时 都有这个padidng 左右16px -->
            <div class="flex-col justify-center items-start lt-sm:px-4 px-2">
              <!-- sm:text-4xl text-xl  默认是  text-xl 当屏幕宽度大于640px时变成text-4xl -->
              <p class="sm:text-4xl text-xl font-bold text-white">{{ item.title }}</p>
              <p class="text-sm sm:text-xl text-gray-200 pt-4">{{ item.subTitle }}</p>
            </div>
          </Container>
        </div>
      </slot>
    </swiper-slide>
    <!-- <slot name="pagination"> -->
    <div
      class="flex items-center justify-center absolute right-0 bottom-0 bg-white opacity-60 text-dark-300 w-40 h-12 z-30"
      v-if="!$attrs.pagination_hiden"
    >
      <div class="pagination w-unset! font-bold mr-4"></div>
      <div class="prev i-mdi-arrow-left-thin" style="font-size: 1.5rem"></div>
      <div class="next i-mdi-arrow-right-thin" style="font-size: 1.5rem"></div>
    </div>
    <!-- </slot> -->
  </swiper>
</template>
<script setup lang="ts">
import { Swiper, SwiperSlide } from "swiper/vue";
import type { Swiper as SwiperType } from "swiper/types";
import { Navigation, Pagination } from "swiper/modules";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import type { SwiperItemType } from "./types";

const modules = [Navigation, Pagination];
const emits = defineEmits(["change"]);
const props = defineProps({
  height: {
    type: String,
    default: "h-80", // 72 * 0.25rem
  },
  items: {
    type: Array as PropType<Array<SwiperItemType>>,
    default: () => [],
  },
});

function getClassAndStyle(str: string) {
  // props.height
  //如果props.height的值包含rem em px 则返回 {string:str,class:''}
  //如果height的值包含h-,则返回{string:'',class:str}
  return {
    style: /(rem|em|px)/.test(props.height) ? { height: str } : {},
    class: /h-/.test(props.height) ? props.height : "",
  };
}
const onSwiper = (swiper: SwiperType) => {
  console.log(swiper);
};
const onSlideChange = (e: SwiperType) => {
  console.log("slide change");
  emits("change", e);
};
</script>
<style scoped lang="scss">
.swiper-button-disabled {
  color: rgba($color: #000, $alpha: 0.3);
}
</style>
